<template>
  <div class="touch" @touchstart="onTouchStart" @touchend="onTouchEnd">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "Touch",
  data() {
    return {
      startScroll: {
        startX: 0,
        startY: 0
      },
      endScroll: {
        endX: 0,
        endY: 0
      }
    };
  },
  methods: {
    onTouchStart(event) {
      // console.info(event);
      this.startScroll.startX = event.changedTouches[0].clientX;
      this.startScroll.startY = event.changedTouches[0].clientY;
    },
    onTouchEnd(event) {
      // console.info(event);
      this.endScroll.endX = event.changedTouches[0].clientX;
      this.endScroll.endY = event.changedTouches[0].clientY;

      const currentX = this.endScroll.endX - this.startScroll.startX;
      const currentY = this.endScroll.endY - this.startScroll.startY;

      console.group(currentX + "**" + currentY);

      if (currentX < -50 && currentY >= -50) {
        console.info("right slide");
        this.$emit("onRightSlide");
      } else if (currentX > 50 && currentY >= -50) {
        console.info("left slide");
        this.$emit("onLeftSlide");
      } else if (currentX >= -50 && currentY > 50) {
        console.info("pull down");
        this.$emit("onPullDown");
      } else if (currentX >= -50 && currentY < -50) {
        console.info("pull up");
        this.$emit("onPullUp");
      } else {
        console.info("click");
        this.$emit("onClick");
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.touch {
  width: 100%;
  height: 100%;
}
</style>
